<template>
  <div>
    <div style="background: #323232; width: 100%; padding: 10px 0">
      <mainContent>
        <template #mainContent>
          <div style="width: 90%; margin: 0 auto" class="pc">
            <div style="display: flex; border-bottom: 1px solid #6c7073">
              <div v-for="(item, index) in ul" :key="index" style="width: 20%">
                <div v-if="index == 0">
                  <p style="color: #fff; font-size: 18px; font-weight: bolder">
                    产品分类
                  </p>
                  <div
                    v-for="(items, ind) in item"
                    :key="ind"
                    style="font-size: 14px; margin: 10px 0 10px; color: #fff"
                  >
                    {{ items.name }}
                  </div>
                </div>
                <div v-else-if="index == 1">
                  <p style="color: #fff; font-size: 18px; font-weight: bolder">
                    服务
                  </p>
                  <div
                    v-for="(items, ind) in item"
                    :key="ind"
                    style="font-size: 12px; margin: 10px 0 10px; color: #fff"
                  >
                    {{ items.name }}
                  </div>
                </div>
                <div v-else-if="index == 2">
                  <p style="color: #fff; font-size: 18px; font-weight: bolder">
                    公司简介
                  </p>
                  <div
                    v-for="(items, ind) in item"
                    :key="ind"
                    style="font-size: 12px; margin: 10px 0 10px; color: #fff"
                  >
                    {{ items.name }}
                  </div>
                </div>
                <div v-else-if="index == 3">
                  <p style="color: #fff; font-size: 18px; font-weight: bolder">
                    联系我们
                  </p>
                  <div
                    v-for="(items, ind) in item"
                    :key="ind"
                    style="
                      margin: 10px 0 10px;
                      display: flex;
                      align-item: center;
                    "
                  >
                    <img
                      :src="items.url"
                      alt=""
                      style="width: 12px; height: 12px; margin: 0 2px 0 0"
                    />
                    <span style="font-size: 12px; color: #fff">{{
                      items.name
                    }}</span>
                  </div>
                </div>
                <div v-else-if="index == 4">
                  <div style="display: flex">
                    <p
                      style="
                        color: #fff;
                        font-size: 18px;
                        font-weight: bolder;
                        margin-left: auto;
                        margin-right: 20px;
                      "
                    >
                      关注我们
                    </p>
                  </div>
                  <div
                    v-for="(items, ind) in item"
                    :key="ind"
                    style="
                      margin: 10px 0 10px;
                      display: flex;
                      align-item: center;
                    "
                  >
                    <img
                      :src="items.url"
                      alt=""
                      style="
                        width: 100px;
                        height: 100px;
                        margin: 0 2px 0 0;
                        margin-left: auto;
                      "
                    />
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div style="padding: 10px 0">
                <span style="color: #fff; font-size: 14px"
                  >隐私权条款.使用权条款.网站问题反馈</span
                >
              </div>
              <div>
                <span style="color: #fff; font-size: 14px">
                  Copyright © 2024 wangs 版权所有</span
                >
                <span style="color: #fff; font-size: 14px; margin: 0 0 0 10px"
                  >莞ICP备20243434号</span
                >
                <span style="color: #fff; font-size: 14px; margin: 0 0 0 10px"
                  >本网站直接或间接向消费者推销商品或者服务的商业宣传均属于“广告”（包装及参数、售后保障等商品信息除外）</span
                >
              </div>
            </div>
          </div>
          <div class="moblie">
            <div style="border-bottom: 1px solid #6c7073">
              <div v-for="(item, index) in ul" :key="index" style="width: 100%">
                <div v-if="index == 0" style="margin: 0 0 15px">
                  <p
                    @click="btnClick('产品分类')"
                    style="
                      color: #fff;
                      font-size: 18px;
                      margin-left: auto;
                      margin-right: 20px;
                      margin-bottom: 15px;
                    "
                  >
                    产品分类
                  </p>
                  <div
                    v-for="(items, ind) in item"
                    :key="ind"
                    v-show="active == '产品分类'"
                    style="color: #b6b6b6; margin: 5px 0"
                  >
                    {{ items.name }}
                  </div>
                </div>
                <div v-if="index == 1" style="margin: 0 0 15px">
                  <p
                    @click="btnClick('服务')"
                    style="
                      color: #fff;
                      font-size: 18px;
                      margin-left: auto;
                      margin-right: 20px;
                      margin-bottom: 15px;
                    "
                  >
                    服务
                  </p>
                  <div
                    v-for="(items, ind) in item"
                    :key="ind"
                    v-show="active == '服务'"
                    style="color: #b6b6b6; margin: 5px 0"
                  >
                    {{ items.name }}
                  </div>
                </div>
                <div v-if="index == 2" style="margin: 0 0 15px">
                  <p
                    @click="btnClick('公司简介')"
                    style="
                      color: #fff;
                      font-size: 18px;
                      margin-left: auto;
                      margin-right: 20px;
                      margin-bottom: 15px;
                    "
                  >
                    公司简介
                  </p>
                  <div
                    v-for="(items, ind) in item"
                    :key="ind"
                    v-show="active == '公司简介'"
                    style="color: #b6b6b6; margin: 5px 0"
                  >
                    {{ items.name }}
                  </div>
                </div>
                <div v-if="index == 4" style="margin: 0 0 15px">
                  <p
                    @click="btnClick('关注我们')"
                    style="
                      color: #fff;
                      font-size: 18px;
                      margin-left: auto;
                      margin-right: 20px;
                      margin-bottom: 15px;
                    "
                  >
                    关注我们
                  </p>
                  <div
                    v-for="(items, ind) in item"
                    :key="ind"
                    v-show="active == '关注我们'"
                  >
                    <img
                      :src="items.url"
                      style="width: 100px; height: 100px"
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div style="padding: 10px 0">
                <span style="color: #fff; font-size: 14px"
                  >隐私权条款.使用权条款.网站问题反馈</span
                >
              </div>
              <div>
                <span style="color: #fff; font-size: 14px">
                  Copyright © 2024 wangs 版权所有</span
                >
                <span style="color: #fff; font-size: 14px; margin: 0 0 0 10px"
                  >莞ICP备20243434号</span
                >
                <span style="color: #fff; font-size: 14px; margin: 0 0 0 10px"
                  >本网站直接或间接向消费者推销商品或者服务的商业宣传均属于“广告”（包装及参数、售后保障等商品信息除外）</span
                >
              </div>
            </div>
          </div>
        </template>
      </mainContent>
    </div>
  </div>
</template>

<script>
import mainContent from "../main/mainContent.vue";
export default {
  components: {
    mainContent,
  },
  data() {
    return {
      ul: [
        [
          {
            key: "1",
            name: "热门级",
          },
          {
            key: "2",
            name: "消费级",
          },
          {
            key: "3",
            name: "行业级",
          },
          {
            key: "4",
            name: "玩家级",
          },
        ],
        [
          {
            key: "1",
            name: "无人机保养服务",
          },
          {
            key: "2",
            name: "无人机检修",
          },
          {
            key: "3",
            name: "随心换",
          },
        ],
        [
          {
            key: "1",
            name: "公司简介",
          },
          {
            key: "2",
            name: "发展方向",
          },
          {
            key: "3",
            name: "企业荣誉",
          },
        ],
        [
          {
            key: "1",
            url: require("../../assets/img/tellphone.png"),
            name: "电话:0898-65361111",
          },
          {
            key: "2",
            url: require("../../assets/img/email.png"),
            name: "邮箱:1256577921@qq.com",
          },
          {
            key: "3",
            url: require("../../assets/img/email.png"),
            name: "人才招聘:23255656565@qq.com",
          },
          {
            key: "4",
            url: require("../../assets/img/time.png"),
            name: "工作时间:09:00-18:00",
          },
          {
            key: "5",
            url: require("../../assets/img/locat.png"),
            name: "公司地址:海南省海口市海府路120号创新大厦",
          },
        ],
        [
          {
            key: "1",
            url: "https://img2.baidu.com/it/u=1037913605,3687793824&fm=253&fmt=auto&app=138&f=GIF?w=200&h=200",
          },
        ],
      ],
      active: "",
      actives: false,
    };
  },
  methods: {
    btnClick(e) {
      if (this.active == e) {
        this.active = "";
      } else {
        this.active = e;
      }
      console.log(e);
    },
  },
};
</script>

<style lang="scss" scoped>
.moblie {
  display: none;
}
@media screen and(max-width:400px) {
  .pc {
    display: none;
  }
  .moblie {
    width: 100%;
    margin: 0 auto;
    display: block;
  }
}
</style>